<template>
    <div>
        <el-button type="primary" class="add_btn" icon="el-icon-plus" size="small" @click="showCreateDialogForm">
            新增组织
        </el-button>
        <div class="search_box">
            <el-form :inline="true" :model="formSearch">
                <el-form-item label="组织">
                    <el-input v-model="formSearch.name" size="small" placeholder="请输入组织名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" icon="el-icon-search" size="small" type="primary" plain>查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table_content">
            <el-table
                    size="small"
                    border
                    ref="multipleTable"
                    :data="tableList"
                    tooltip-effect="dark"
                    v-loading="searchLoading"
                    style="width: 100%"
                    :header-cell-style="{backgroundColor:'#fafafa',fontSize:'15px',color:'#333333'}"
                    :cell-style="{fontSize:'15px'}"
            >
                <el-table-column
                        type="index"
                        label="序号"
                        fixed="left"
                        align="center"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="name"
                        align="center"
                        label="组织">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        align="center"
                        label="备注">
                </el-table-column>
                <el-table-column
                        prop="accountNumber"
                        align="center"
                        label="账号数量">
                    <template slot-scope="scope">
                        <div v-show="scope.row.accountNumber===0">{{scope.row.accountNumber}}</div>
                        <router-link v-show="scope.row.accountNumber>0" :to="'/user?deptId='+scope.row.id">
                            <span style="color: #409EFF">{{scope.row.accountNumber}}</span>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        show-overflow-tooltip
                        align="center"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        min-width="140">
                    <template slot-scope="scope">
                        <el-button @click="showDepartmentDetail(scope.row)" size="mini">查看</el-button>
                        <el-button @click="showUpdateDialogForm(scope.row)" type="primary" size="mini">编辑</el-button>
                        <el-button v-show="scope.row.accountNumber===0" @click="showDeleteDialogForm(scope.row)"
                                   type="danger" size="mini">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination_box">
                <div class="pagination_box_content">
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page="formSearch.pageNum"
                            layout="total, sizes, prev, pager, next, jumper"
                            :page-size="formSearch.pageSize"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <CreateDialogForm width="40%" title="新增组织" :dialogFormVisible="createDialogFormVisible" :form="form"
                          :hideDialog="hideCreateDialogForm"
                          :submit="addDepartment" :columns="columns"
                          :loading="addDepartmentLoading" :error="error"/>
        <UpdateDialogForm width="40%" title="修改组织" :dialogFormVisible="updateDialogFormVisible"
                          :hideDialog="hideUpdateDialogForm"
                          :submit="updateDepartment" :updateItem="updateItem" :columns="columns" :form="form"
                          :loading="updateDepartmentLoading" :error="error"/>
        <DepartmentDetail :detailData="detailData" :visible="departmentDetailShow"
                          :hideDialog="hideDepartmentDetail"></DepartmentDetail>
        <el-dialog
                title="提示"
                :visible.sync="deleteDialogShow"
                :close-on-click-modal="false"
                width="400px"
                center>
            <div class="icon_question">?</div>
            <span>您选择了1条数据记录是否确认删除?</span>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialogShow=false;deleteRow = {}">取 消</el-button>
                    <el-button type="primary" @click="deleteDepartment">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>
<script>
    import AutoSelectForm from '@/components/common/AutoSelectForm'
    import service from '@/api/service'
    import CreateDialogForm from '@/components/common/CreateDialogForm'
    import UpdateDialogForm from '@/components/common/UpdateDialogForm'
    import DepartmentDetail from './container/department/DepartmentDetail'

    export default {
        name: 'Department',
        data() {
            return {
                formSearch: {
                    name: '',
                    pageNum: 1,
                    pageSize: 10
                },
                total: 0,
                pages: 0,
                tableList: [],
                error: false,
                createDialogFormVisible: false,
                addDepartmentLoading: false,
                updateDialogFormVisible: false,
                updateDepartmentLoading: false,
                updateItem: {},
                form: {
                    name: "",
                    remark: "",
                },
                columns: [
                    {
                        label: '组织',
                        fieldName: 'name',
                        type: "input",
                        rules: [
                            {required: true, message: '请填写组织', trigger: 'blur'}
                        ]
                    },
                    {
                        label: '描述',
                        fieldName: 'remark',
                        type: "textarea",
                        rules: []
                    }
                ],
                departmentDetailShow: false,
                detailData: {},
                searchLoading: false,
                deleteDialogShow: false,
                deleteRow: {}
            }
        },
        methods: {
            async onSubmit() {
                this.formSearch.pageNum = 1;
                let formData = {
                    name: this.formSearch.name,
                    pageNum: 1,
                    pageSize: this.formSearch.pageSize
                };
                this.searchLoading = true;
                const res = await service.searchDepts(formData);
                this.searchLoading = false;
                if (res.status < 400) {
                    this.formSearch.pageNum = res.res.pageNum;
                    this.formSearch.pageSize = res.res.pageSize;
                    this.total = res.res.total;
                    this.pages = res.res.pages;
                    this.tableList = res.res.result || [];
                }
            },
            //分页
            handleCurrentChange(pageNum) {
                this.formSearch.pageNum = pageNum;
                this.searchCommon();
            },
            async searchCommon() {
                let formData = {
                    name: this.formSearch.name,
                    pageNum: this.formSearch.pageNum,
                    pageSize: this.formSearch.pageSize,
                };
                this.searchLoading = true;
                const res = await service.searchDepts(formData);
                this.searchLoading = false;
                if (res.status < 400) {
                    this.formSearch.pageNum = res.res.pageNum;
                    this.formSearch.pageSize = res.res.pageSize;
                    this.total = res.res.total;
                    this.pages = res.res.pages;
                    this.tableList = res.res.result || [];
                }
            },
            //新增
            showCreateDialogForm() {
                this.createDialogFormVisible = true;
            },
            hideCreateDialogForm() {
                this.createDialogFormVisible = false;
                this.error = false
            },
            async addDepartment(data) {
                this.addDepartmentLoading = true;
                const res = await service.addDepartment(data);
                this.addDepartmentLoading = false;
                if (res.status < 400) {
                    this.createDialogFormVisible = false;
                    this.error = false;
                } else {
                    this.error = true;
                }
            },
            //修改
            showUpdateDialogForm(row) {
                this.updateDialogFormVisible = true;
                this.$nextTick(function () {
                    this.updateItem = row;
                    this.form = Object.assign({}, this.form, {
                        name: row.name,
                        remark: row.remark
                    })
                })
            },
            hideUpdateDialogForm() {
                this.updateDialogFormVisible = false;
                this.error = false;
                this.updateItem = {};
                this.form = {
                    name: "",
                    remark: "",
                }
            },
            async updateDepartment(data) {
                this.updateDepartmentLoading = true;
                const res = await service.updateDepartment(data);
                this.updateDepartmentLoading = false;
                if (res.status < 400) {
                    this.tableList = this.tableList.map(item => {
                        if (item.id === data.id) {
                            return Object.assign({}, item, data);
                        }
                        return item;
                    });
                    this.updateDialogFormVisible = false;
                    this.error = false;
                } else {
                    this.error = true;
                }
            },
            //查看详情
            showDepartmentDetail(row) {
                this.departmentDetailShow = true;
                this.detailData = row;
            },
            hideDepartmentDetail() {
                this.departmentDetailShow = false;
                this.detailData = {};
            },
            //删除
            showDeleteDialogForm(row) {
                this.deleteRow = row;
                this.deleteDialogShow = true;
            },
            async deleteDepartment() {
                const res = await service.deleteDepartment({
                    id: this.deleteRow.id
                })
                if (res.status < 400) {
                    this.tableList = this.tableList.filter(item => {
                        return item.id !== this.deleteRow.id
                    });
                    this.deleteDialogShow = false;
                    this.deleteRow = {};
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        duration: 3000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: '删除失败',
                        duration: 3000
                    });
                }
            }
        },
        created() {
            this.searchCommon()
        },
        components: {
            AutoSelectForm,
            CreateDialogForm,
            UpdateDialogForm,
            DepartmentDetail
        }
    }
</script>
<style scoped lang="stylus">
</style>
